<template>
<div class="home-preview" :style='{"width":"100%","margin":"10px auto","flexWrap":"wrap","justifyContent":"space-around","display":"flex"}'>



<div class="recommend" :style='{"width":"38%","margin":"20px 0","position":"relative","borderRadius":"20px","background":"#fff"}'>
	<div v-if="true" class="idea recommendIdea" :style='{"padding":"20px","alignItems":"center","flexWrap":"wrap","justifyContent":"center","display":"flex","height":"120px"}'>
		<div class="box1" :style='{"width":"35%","borderRadius":"10px","background":"linear-gradient(90deg, #5B7DE8 4%, #19DFD6 100%)","height":"10px"}'></div>
		<div class="box2" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box3" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box4" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box5" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box6" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box7" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box8" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box9" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box10" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
	</div>
	
    <div class="title" :style='{"width":"100%","margin":"10px auto","lineHeight":"54px","position":"absolute","top":"15px","textAlign":"center"}'>
		<span :style='{"color":"#000","fontSize":"28px"}'>驾校信息推荐</span>
	</div>
	
	
	
	
	
	
	
	
	
	<!-- 样式八 -->
	<div class="list list8 index-pv1" :style='{"width":"100%","padding":"10px","flexWrap":"wrap","display":"flex","height":"auto"}'>
		<div class="list-body" :style='{"width":"100%","justifyContent":"space-around","display":"flex","height":"320px"}'>
			<div v-if="jiaxiaoxinxiRecommend.length>0" @click="toDetail('jiaxiaoxinxiDetail', jiaxiaoxinxiRecommend[0])" class="list-item animation-box" :style='{"width":"30%","overflow":"hidden","position":"relative","borderRadius":"20px 0px 0px 0px","height":"300px"}'>
				<img :style='{"width":"100%","objectFit":"cover","float":"left","height":"100%"}' v-if="jiaxiaoxinxiRecommend[0].fengmian.substr(0,4)=='http'" :src="jiaxiaoxinxiRecommend[0].fengmian.split(',')[0]" alt="" />
				<img :style='{"width":"100%","objectFit":"cover","float":"left","height":"100%"}' v-else :src="baseUrl + (jiaxiaoxinxiRecommend[0].fengmian?jiaxiaoxinxiRecommend[0].fengmian.split(',')[0]:'')" alt="" />
				<div class="title line1" :style='{"color":"#fff","left":"0","textAlign":"center","bottom":"0","background":"#2b394d","width":"100%","lineHeight":"44px","fontSize":"18px","position":"absolute"}'>驾校名称:{{jiaxiaoxinxiRecommend[0].jiaxiaomingcheng}}</div>
				<div class="title line1" :style='{"color":"#fff","left":"0","textAlign":"center","bottom":"0","background":"#2b394d","width":"100%","lineHeight":"44px","fontSize":"18px","position":"absolute"}'>驾校地址:{{jiaxiaoxinxiRecommend[0].jiaxiaodizhi}}</div>
				<div class="title line1" :style='{"color":"#fff","left":"0","textAlign":"center","bottom":"0","background":"#2b394d","width":"100%","lineHeight":"44px","fontSize":"18px","position":"absolute"}'>学费:{{jiaxiaoxinxiRecommend[0].xuefei}}</div>
			</div>
			<div v-if="jiaxiaoxinxiRecommend.length>1" @click="toDetail('jiaxiaoxinxiDetail', jiaxiaoxinxiRecommend[1])" class="list-item animation-box" :style='{"width":"30%","position":"relative","height":"300px"}'>
				<img :style='{"width":"100%","objectFit":"cover","float":"left","height":"100%"}' v-if="jiaxiaoxinxiRecommend[1].fengmian.substr(0,4)=='http'" :src="jiaxiaoxinxiRecommend[1].fengmian.split(',')[0]" alt="" />
				<img :style='{"width":"100%","objectFit":"cover","float":"left","height":"100%"}' v-else :src="baseUrl + (jiaxiaoxinxiRecommend[1].fengmian?jiaxiaoxinxiRecommend[1].fengmian.split(',')[0]:'')" alt="" />
				<div class="title line1" :style='{"color":"#fff","left":"0","textAlign":"center","bottom":"0","background":"#2b394d","width":"100%","lineHeight":"44px","fontSize":"18px","position":"absolute"}'>驾校名称:{{jiaxiaoxinxiRecommend[1].jiaxiaomingcheng}}</div>
				<div class="title line1" :style='{"color":"#fff","left":"0","textAlign":"center","bottom":"0","background":"#2b394d","width":"100%","lineHeight":"44px","fontSize":"18px","position":"absolute"}'>驾校地址:{{jiaxiaoxinxiRecommend[1].jiaxiaodizhi}}</div>
				<div class="title line1" :style='{"color":"#fff","left":"0","textAlign":"center","bottom":"0","background":"#2b394d","width":"100%","lineHeight":"44px","fontSize":"18px","position":"absolute"}'>学费:{{jiaxiaoxinxiRecommend[1].xuefei}}</div>
			</div>
			<div v-if="jiaxiaoxinxiRecommend.length>2" @click="toDetail('jiaxiaoxinxiDetail', jiaxiaoxinxiRecommend[2])" class="list-item animation-box" :style='{"width":"30%","overflow":"hidden","position":"relative","borderRadius":"0px 20px 0px 0px","height":"300px"}'>
				<img :style='{"width":"100%","objectFit":"cover","float":"left","height":"100%"}' v-if="jiaxiaoxinxiRecommend[2].fengmian.substr(0,4)=='http'" :src="jiaxiaoxinxiRecommend[2].fengmian.split(',')[0]" alt="" />
				<img :style='{"width":"100%","objectFit":"cover","float":"left","height":"100%"}' v-else :src="baseUrl + (jiaxiaoxinxiRecommend[2].fengmian?jiaxiaoxinxiRecommend[2].fengmian.split(',')[0]:'')" alt="" />
				<div class="title line1" :style='{"color":"#fff","left":"0","textAlign":"center","bottom":"0","background":"#2b394d","width":"100%","lineHeight":"44px","fontSize":"18px","position":"absolute"}'>驾校名称:{{jiaxiaoxinxiRecommend[2].jiaxiaomingcheng}}</div>
				<div class="title line1" :style='{"color":"#fff","left":"0","textAlign":"center","bottom":"0","background":"#2b394d","width":"100%","lineHeight":"44px","fontSize":"18px","position":"absolute"}'>驾校地址:{{jiaxiaoxinxiRecommend[2].jiaxiaodizhi}}</div>
				<div class="title line1" :style='{"color":"#fff","left":"0","textAlign":"center","bottom":"0","background":"#2b394d","width":"100%","lineHeight":"44px","fontSize":"18px","position":"absolute"}'>学费:{{jiaxiaoxinxiRecommend[2].xuefei}}</div>
			</div>
		</div>
		<div :style='{"width":"100%","margin":"0","justifyContent":"space-around","display":"flex","height":"auto"}' class="list-body">
			<div v-if="jiaxiaoxinxiRecommend.length>3" @click="toDetail('jiaxiaoxinxiDetail', jiaxiaoxinxiRecommend[3])" class="list-item animation-box" :style='{"width":"63%","overflow":"hidden","position":"relative","borderRadius":"0px 0px 0px 20px","height":"470px"}'>
				<img :style='{"width":"100%","objectFit":"cover","float":"left","height":"100%"}' v-if="jiaxiaoxinxiRecommend[3].fengmian.substr(0,4)=='http'" :src="jiaxiaoxinxiRecommend[3].fengmian.split(',')[0]" alt="" />
				<img :style='{"width":"100%","objectFit":"cover","float":"left","height":"100%"}' v-else :src="baseUrl +  (jiaxiaoxinxiRecommend[3].fengmian?jiaxiaoxinxiRecommend[3].fengmian.split(',')[0]:'')" alt="" />
				<div class="title line1" :style='{"color":"#fff","left":"0","textAlign":"center","bottom":"0","background":"#2b394d","width":"100%","lineHeight":"44px","fontSize":"18px","position":"absolute"}'>驾校名称:{{jiaxiaoxinxiRecommend[3].jiaxiaomingcheng}}</div>
				<div class="title line1" :style='{"color":"#fff","left":"0","textAlign":"center","bottom":"0","background":"#2b394d","width":"100%","lineHeight":"44px","fontSize":"18px","position":"absolute"}'>驾校地址:{{jiaxiaoxinxiRecommend[3].jiaxiaodizhi}}</div>
				<div class="title line1" :style='{"color":"#fff","left":"0","textAlign":"center","bottom":"0","background":"#2b394d","width":"100%","lineHeight":"44px","fontSize":"18px","position":"absolute"}'>学费:{{jiaxiaoxinxiRecommend[3].xuefei}}</div>
			</div>
			<div v-if="jiaxiaoxinxiRecommend.length>4" @click="toDetail('jiaxiaoxinxiDetail', jiaxiaoxinxiRecommend[4])" class="list-item animation-box" :style='{"width":"30%","overflow":"hidden","position":"relative","borderRadius":"0px 0px 20px 0px","height":"470px"}'>
				<img :style='{"width":"100%","objectFit":"cover","float":"left","height":"100%"}' v-if="jiaxiaoxinxiRecommend[4].fengmian.substr(0,4)=='http'" :src="jiaxiaoxinxiRecommend[4].fengmian.split(',')[0]" alt="" />
				<img :style='{"width":"100%","objectFit":"cover","float":"left","height":"100%"}' v-else :src="baseUrl + (jiaxiaoxinxiRecommend[4].fengmian?jiaxiaoxinxiRecommend[4].fengmian.split(',')[0]:'')" alt="" />
				<div class="title line1" :style='{"color":"#fff","left":"0","textAlign":"center","bottom":"0","background":"#2b394d","width":"100%","lineHeight":"44px","fontSize":"18px","position":"absolute"}'>驾校名称:{{jiaxiaoxinxiRecommend[4].jiaxiaomingcheng}}</div>
				<div class="title line1" :style='{"color":"#fff","left":"0","textAlign":"center","bottom":"0","background":"#2b394d","width":"100%","lineHeight":"44px","fontSize":"18px","position":"absolute"}'>驾校地址:{{jiaxiaoxinxiRecommend[4].jiaxiaodizhi}}</div>
				<div class="title line1" :style='{"color":"#fff","left":"0","textAlign":"center","bottom":"0","background":"#2b394d","width":"100%","lineHeight":"44px","fontSize":"18px","position":"absolute"}'>学费:{{jiaxiaoxinxiRecommend[4].xuefei}}</div>
			</div>
		</div>
	</div>
	
	
	<div @click="moreBtn('jiaxiaoxinxi')" :style='{"border":"0","margin":"10px auto","borderRadius":"10px","textAlign":"center","background":"linear-gradient(-90deg, #5B7DE8 4%, #19DFD6 100%)","display":"block","width":"100px","lineHeight":"32px"}'>
		<span :style='{"color":"#f5f5f5","fontSize":"12px"}'>查看更多</span>
		<i v-if="true" :style='{"color":"#f5f5f5","fontSize":"12px"}' class="el-icon-d-arrow-right"></i>
	</div>
	
</div>

	
<div class="news" :style='{"width":"38%","margin":"20px 0","position":"relative","borderRadius":"20px","background":"#fff"}'>
	<div v-if="true" class="idea newsIdea" :style='{"padding":"20px","alignItems":"center","flexWrap":"wrap","justifyContent":"center","display":"flex","height":"120px"}'>
		<div class="box1" :style='{"width":"35%","borderRadius":"10px","background":"linear-gradient(90deg, #5B7DE8 4%, #19DFD6 100%)","height":"10px"}'></div>
		<div class="box2" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box3" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box4" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box5" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box6" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box7" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box8" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box9" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box10" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
	</div>
	
	<div class="title" :style='{"width":"100%","margin":"10px auto","lineHeight":"54px","position":"absolute","top":"15px","textAlign":"center"}'>
		<span :style='{"color":"#000","fontSize":"28px"}'>公告信息</span>
	</div>
	
	
	
	
	
	
	<!-- 样式五 -->
	<div v-if="newsList.length" class="list list5 index-pv1" :style='{"padding":"0 10px","flexWrap":"wrap","background":"#fff","display":"flex","width":"100%","justifyContent":"space-around","height":"auto"}'>
	  <div @click="toDetail('newsDetail', newsList[0])" v-if="newsList.length>0" class="list-item animation-box" :style='{"boxShadow":"0px 4px 10px 0px rgba(0,0,0,0.302)","margin":"0 10px 20px","overflow":"hidden","borderRadius":"20px 20px 20px 20px","background":"#fff","flexDirection":"column","display":"flex","width":"360px","height":"780px"}'>
	    <img :style='{"objectFit":"cover","width":"100%","height":"650px"}' :src="baseUrl + newsList[0].picture" alt="">
	    <div :style='{"width":"100%","padding":"10px","background":"#fff","flex":"1"}'>
	      <div :style='{"padding":"0 10px","lineHeight":"32px","fontSize":"16px","overflow":"hidden","color":"#333","height":"32px"}' class="new5-one-info-title line1">{{newsList[0].title}}</div>
	      <div :style='{"padding":"0 10px","lineHeight":"32px","fontSize":"14px","overflow":"hidden","color":"#6D6D6D","height":"64px"}' class="new5-one-info-descript line3">{{newsList[0].introduction}}</div>
	      <div :style='{"width":"100%","padding":"10px","lineHeight":"32px","fontSize":"12px","color":"#999","textAlign":"right"}' class="new5-one-info-time">{{newsList[0].addtime}}</div>
	    </div>
	  </div>
	  <div :style='{"background":"#fff","flexDirection":"column","flex":"1","justifyContent":"space-around","display":"flex","height":"780px"}' class="list-body">
	    <div @click="toDetail('newsDetail', newsList[1])" v-if="newsList.length>1" class="new5-item animation-box" :style='{"boxShadow":"0px 4px 10px 0px rgba(0,0,0,0.302)","overflow":"hidden","borderRadius":"20px","background":"#fff","width":"100%","position":"relative","height":"220px"}'>
	      <div :style='{"padding":"10px","lineHeight":"32px","fontSize":"12px","color":"#fff","background":"#19DED6"}' class="new5-item-time">{{newsList[1].addtime.split(" ")[0]}}1</div>
	      <div :style='{"padding":"0 20px","margin":"10px 0 0 0","overflow":"hidden","color":"#333","lineHeight":"32px","fontSize":"16px","height":"32px"}' class="new5-item-title line1">{{newsList[1].title}}</div>
	      <div :style='{"padding":"0 20px","lineHeight":"32px","fontSize":"14px","overflow":"hidden","color":"#666","height":"130px"}' class="new5-item-descript line3">{{newsList[1].introduction}}</div>
	    </div>
		<div @click="toDetail('newsDetail', newsList[2])" v-if="newsList.length>2" class="new5-item animation-box" :style='{"boxShadow":"0px 4px 10px 0px rgba(0,0,0,0.302)","overflow":"hidden","borderRadius":"20px","background":"#fff","width":"100%","position":"relative","height":"220px"}'>
		  <div :style='{"padding":"10px","lineHeight":"32px","fontSize":"12px","color":"#fff","background":"#19DED6"}' class="new5-item-time">{{newsList[2].addtime.split(" ")[0]}}</div>
		  <div :style='{"padding":"0 20px","margin":"10px 0 0 ","overflow":"hidden","color":"#333","lineHeight":"32px","fontSize":"16px","height":"32px"}' class="new5-item-title line1">{{newsList[2].title}}</div>
		  <div :style='{"padding":"0 20px","lineHeight":"32px","fontSize":"14px","overflow":"hidden","color":"#666","height":"130px"}' class="new5-item-descript line3">{{newsList[2].introduction}}</div>
		</div>
		<div @click="toDetail('newsDetail', newsList[3])" v-if="newsList.length>3" class="new5-item animation-box" :style='{"boxShadow":"0px 4px 10px 0px rgba(0,0,0,0.302)","overflow":"hidden","borderRadius":"20px","background":"#fff","width":"100%","position":"relative","height":"220px"}'>
		  <div :style='{"padding":"10px","lineHeight":"32px","fontSize":"12px","color":"#fff","background":"#19DED6"}' class="new5-item-time">{{newsList[3].addtime.split(" ")[0]}}</div>
		  <div :style='{"padding":"0 20px","margin":"10px 0 0 ","overflow":"hidden","color":"#333","lineHeight":"32px","fontSize":"16px","height":"32px"}' class="new5-item-title line1">{{newsList[3].title}}</div>
		  <div :style='{"padding":"0 20px","lineHeight":"32px","fontSize":"14px","overflow":"hidden","color":"#666","height":"130px"}' class="new5-item-descript line3">{{newsList[3].introduction}}</div>
		</div>
	  </div>
	</div>
	
	
	
	
	
	
	<div @click="moreBtn('news')" :style='{"border":"0","margin":"10px auto","borderRadius":"10px","textAlign":"center","background":"linear-gradient(-90deg, #5B7DE8 4%, #19DFD6 100%)","display":"block","width":"100px","lineHeight":"32px"}'>
		<span :style='{"color":"#f5f5f5","fontSize":"12px"}'>查看更多</span>
		<i v-if="true" :style='{"color":"#f5f5f5","fontSize":"12px"}' class="el-icon-d-arrow-right"></i>
	</div>
	
</div>

	<!-- 关于我们 -->
	<div :style='{"padding":"30px","boxShadow":"0 1px 6px rgba(255, 255, 255, .3)","margin":"0 0 10px","flexWrap":"wrap","display":"flex","width":"70%","position":"relative","height":"auto"}'>
	  <div :style='{"padding":"0 20px","borderColor":"#3aaddf","margin":"40px 35% 40px","color":"#333","textAlign":"center","borderWidth":"0 0 8px","width":"30%","lineHeight":"25px","fontSize":"40px","borderStyle":"solid"}'>{{aboutUsDetail.title}}</div>
	  <div :style='{"margin":"0 0 10px","color":"#999","textAlign":"center","display":"none","width":"100%","lineHeight":"1.5","fontSize":"20px"}'>{{aboutUsDetail.subtitle}}</div>
	  <div :style='{"width":"60%","display":"flex","height":"auto"}'>
	    <img :style='{"width":"320px","margin":"0","objectFit":"cover","borderRadius":" 25px","height":"600px"}' :src="baseUrl + aboutUsDetail.picture1">
	    <img :style='{"width":"320px","margin":"0 0 0 -15%","objectFit":"cover","borderRadius":" 25px","height":"600px"}' :src="baseUrl + aboutUsDetail.picture2">
	    <img :style='{"width":"320px","margin":"0 0 0 -15%","objectFit":"cover","borderRadius":" 25px","height":"600px"}' :src="baseUrl + aboutUsDetail.picture3">
	  </div>
	  <div :style='{"padding":"40px 30px","boxShadow":"0px 4px 10px 0px rgba(0,0,0,0.302)","margin":"0 0 10px 0","overflow":"hidden","color":"#000","borderRadius":"20px","flex":"1","background":"#FFFFFF","width":"100%","lineHeight":"2","fontSize":"16px","height":"600px"}' v-html="aboutUsDetail.content"></div>
	  <div :style='{"width":"285px","background":"url(\"http://codegen.caihongy.cn/20201114/7856ba26477849ea828f481fa2773a95.jpg\") 0% 0% / cover no-repeat","display":"none","height":"100px"}' />
	  <div :style='{"width":"285px","background":"url(\"http://codegen.caihongy.cn/20201114/7856ba26477849ea828f481fa2773a95.jpg\") 0% 0% / cover no-repeat","display":"none","height":"100px"}' />
	  <div :style='{"width":"285px","background":"url(\"http://codegen.caihongy.cn/20201114/7856ba26477849ea828f481fa2773a95.jpg\") 0% 0% / cover no-repeat","display":"none","height":"100px"}' />
	  <div :style='{"width":"285px","background":"url(\"http://codegen.caihongy.cn/20201114/7856ba26477849ea828f481fa2773a95.jpg\") 0% 0% / cover no-repeat","display":"none","height":"100px"}' />
	</div>
	<!-- 系统简介 -->
	<div :style='{"padding":"20px 260px","boxShadow":"0 1px 6px rgba(255, 255, 255, .3)","margin":"0 0 10px","flexWrap":"wrap","backgroundImage":"url(http://codegen.caihongy.cn/20221021/b22a1f0f97324575b88c1dd3f72b2434.png)","display":"flex","width":"100%","backgroundSize":"100% 100%","height":"736px"}'>
	  <div :style='{"margin":"0 35% 80px","borderColor":"#3aaddf","color":"#333","textAlign":"center","borderWidth":"0 0 8px","width":"30%","lineHeight":"20px","fontSize":"40px","borderStyle":"solid","height":"30px"}'>{{systemIntroductionDetail.title}}</div>
	  <div :style='{"margin":"0 0 10px","color":"#999","textAlign":"center","display":"none","width":"100%","lineHeight":"1.5","fontSize":"20px"}'>{{systemIntroductionDetail.subtitle}}</div>
	  <div :style='{"width":"50%","padding":"0 10px","flexDirection":"column","justifyContent":"space-around","display":"flex","height":"560px"}'>
	    <img :style='{"margin":"0 10px","objectFit":"cover","display":"block","height":"170px"}' :src="baseUrl + systemIntroductionDetail.picture1">
	    <img :style='{"margin":"0 10px","objectFit":"cover","display":"block","height":"170px"}' :src="baseUrl + systemIntroductionDetail.picture2">
	    <img :style='{"margin":"0 10px","objectFit":"cover","display":"block","height":"170px"}' :src="baseUrl + systemIntroductionDetail.picture3">
	  </div>
	  <div :style='{"padding":"40px","margin":"0 0 10px 0","overflow":"hidden","color":"#000","flex":"1","background":"rgba(255,255,255,0.5)","width":"100%","lineHeight":"2","fontSize":"16px"}' v-html="systemIntroductionDetail.content"></div>
	  <div :style='{"width":"285px","background":"url(\"http://codegen.caihongy.cn/20201114/7856ba26477849ea828f481fa2773a95.jpg\") 0% 0% / cover no-repeat","display":"none","height":"100px"}' />
	  <div :style='{"width":"285px","background":"url(\"http://codegen.caihongy.cn/20201114/7856ba26477849ea828f481fa2773a95.jpg\") 0% 0% / cover no-repeat","display":"none","height":"100px"}' />
	  <div :style='{"width":"285px","background":"url(\"http://codegen.caihongy.cn/20201114/7856ba26477849ea828f481fa2773a95.jpg\") 0% 0% / cover no-repeat","display":"none","height":"100px"}' />
	  <div :style='{"width":"285px","background":"url(\"http://codegen.caihongy.cn/20201114/7856ba26477849ea828f481fa2773a95.jpg\") 0% 0% / cover no-repeat","display":"none","height":"100px"}' />
	</div>

<div class="lists" :style='{"margin":"0 0 10px","position":"relative"}'>
	<div v-if="true" class="idea" :style='{"padding":"20px","alignItems":"center","flexWrap":"wrap","justifyContent":"center","display":"flex","height":"120px"}'>
		<div class="box1" :style='{"width":"20%","borderRadius":"10px","background":"linear-gradient(90deg, #5B7DE8 4%, #19DFD6 100%)","height":"10px"}'></div>
		<div class="box2" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box3" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box4" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box5" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box6" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box7" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box8" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box9" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box10" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
	</div>
	
	<div class="title" :style='{"width":"100%","margin":"10px auto","lineHeight":"54px","position":"absolute","top":"15px","textAlign":"center"}'>
	  <span :style='{"color":"#000","fontSize":"28px"}'>驾校教练展示</span>
	</div>
	
	
	<!-- 样式一 -->
	<div class="list list1 index-pv1" :style='{"width":"100%","padding":"0 260px","flexWrap":"wrap","display":"flex","height":"auto"}'>
		<div :style='{"boxShadow":"0px 4px 10px 0px rgba(0,0,0,0.302)","padding":"8px","margin":"10px","textAlign":"center","background":"#fff","width":"18%","height":"auto"}' v-for="(item,index) in jiaxiaojiaolianList" :key="index" @click="toDetail('jiaxiaojiaolianDetail', item)" class="list-item animation-box">
			<img :style='{"objectFit":"cover","width":"100%","height":"250px"}' v-if="item.touxiang.substr(0,4)=='http'" :src="item.touxiang.split(',')[0]" alt="" />
			<img :style='{"objectFit":"cover","width":"100%","height":"250px"}' v-else :src="baseUrl + (item.touxiang?item.touxiang.split(',')[0]:'')" alt="" />
			<div class="name line1" :style='{"padding":"10px","lineHeight":"32px","fontSize":"14px","color":"#9E9E9E"}'>教练姓名:{{item.jiaolianxingming}}</div>
			<div class="name line1" :style='{"padding":"10px","lineHeight":"32px","fontSize":"14px","color":"#9E9E9E"}'>年龄:{{item.nianling}}</div>
			<div class="name line1" :style='{"padding":"10px","lineHeight":"32px","fontSize":"14px","color":"#9E9E9E"}'>性别:{{item.xingbie}}</div>
		</div>
	</div>
	
	
	
	
	
	
	
	
	
	<div @click="moreBtn('jiaxiaojiaolian')" :style='{"border":"0","margin":"10px auto","borderRadius":"20px","textAlign":"center","background":"linear-gradient(-90deg, #5B7DE8 4%, #19DFD6 100%)","display":"block","width":"100px","lineHeight":"32px"}'>
		<span :style='{"color":"#f5f5f5","fontSize":"12px"}'>查看更多</span>
		<i v-if="true" :style='{"color":"#f5f5f5","fontSize":"12px"}' class="el-icon-d-arrow-right"></i>
	</div>
	

</div>


</div>
</template>

<script>
  export default {
    //数据集合
    data() {
      return {
        baseUrl: '',
        aboutUsDetail: {},
        systemIntroductionDetail: {},
        newsList: [],
        jiaxiaoxinxiRecommend: [],

        jiaxiaojiaolianList: [],
      }
    },
    created() {
      this.baseUrl = this.$config.baseUrl;
      this.getNewsList();
      this.getAboutUs();
      this.getSystemIntroduction();
      this.getList();
    },
    //方法集合
    methods: {
      getAboutUs() {
          this.$http.get('aboutus/detail/1', {}).then(res => {
            if(res.data.code == 0) {
              this.aboutUsDetail = res.data.data;
            }
          })
      },
      getSystemIntroduction() {
          this.$http.get('systemintro/detail/1', {}).then(res => {
            if(res.data.code == 0) {
              this.systemIntroductionDetail = res.data.data;
            }
          })
      },
		getNewsList() {
			this.$http.get('news/list', {params: {
				page: 1,
				limit: 6,
			order: 'desc'}}).then(res => {
				if (res.data.code == 0) {
					this.newsList = res.data.data.list;
					
					
				}
			});
		},
		getList() {
          let autoSortUrl = "";
          autoSortUrl = "jiaxiaoxinxi/autoSort";
			this.$http.get(autoSortUrl, {params: {
				page: 1,
				limit: 6,
			}}).then(res => {
				if (res.data.code == 0) {
					this.jiaxiaoxinxiRecommend = res.data.data.list;
					
					
					// 商品列表样式五
					
				}
			});
			
			this.$http.get('jiaxiaojiaolian/list', {params: {
				page: 1,
				limit: 6,
			}}).then(res => {
				if (res.data.code == 0) {
					this.jiaxiaojiaolianList = res.data.data.list;
					
					// 商品列表样式五
					
				}
			});
		},
		toDetail(path, item) {
			this.$router.push({path: '/index/' + path, query: {detailObj: JSON.stringify(item)}});
		},
		moreBtn(path) {
			this.$router.push({path: '/index/' + path});
		}
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.home-preview {
	
		.recommend {
			.list3 .swiper-button-prev {
				left: 10px;
				right: auto;
			}
			
			.list3 .swiper-button-prev::after {
				color: rgb(64, 158, 255);
			}
			
			.list3 .swiper-button-next {
				left: auto;
				right: 10px;
			}
			
			.list3 .swiper-button-next::after {
				color: rgb(64, 158, 255);
			}
			
			.list5 .swiper-button-prev {
				left: 10px;
				right: auto;
			}
			
			.list5 .swiper-button-prev::after {
				color: rgb(64, 158, 255);
        }
        
        .list5 .swiper-button-next {
				left: auto;
				right: 10px;
			}
			
			.list5 .swiper-button-next::after {
				color: rgb(64, 158, 255);
			}
			
			.list5 {
				.swiper-slide-prev {
					position: relative;
					z-index: 3;
				}
		
				.swiper-slide-next {
					position: relative;
					z-index: 3;
				}
		
				.swiper-slide-active {
					position: relative;
					z-index: 5;
				}
			}
			
			.index-pv1 .animation-box {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
				z-index: initial;
			}
			
			.index-pv1 .animation-box:hover {
				transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
				-webkit-perspective: 1000px;
				perspective: 1000px;
				transition: 0.3s;
				z-index: 1;
			}
			
			.index-pv1 .animation-box img {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
			}
			
			.index-pv1 .animation-box img:hover {
				transform: scale(0.95) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
				-webkit-perspective: 1000px;
				perspective: 1000px;
				transition: 0.3s;
			}
		}
		
		.news {
			.list3 .swiper-button-prev {
				left: 10px;
				right: auto;
			}
			
			.list3 .swiper-button-prev::after {
				color: rgb(64, 158, 255);
			}
			
			.list3 .swiper-button-next {
				left: auto;
				right: 10px;
			}
			
			.list3 .swiper-button-next::after {
				color: rgb(64, 158, 255);
			}
			
			.list6 .swiper-button-prev {
				left: 10px;
				right: auto;
			}
			
			.list6 .swiper-button-prev::after {
				color: rgb(64, 158, 255);
			}
			
			.list6 .swiper-button-next {
				left: auto;
				right: 10px;
			}
			
			.list6 .swiper-button-next::after {
				color: rgb(64, 158, 255);
			}
			
			.index-pv1 .animation-box {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
				z-index: initial;
			}
			
			.index-pv1 .animation-box:hover {
				transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
				-webkit-perspective: 1000px;
				perspective: 1000px;
				transition: 0.3s;
				z-index: 1;
			}
			
			.index-pv1 .animation-box img {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
			}
			
			.index-pv1 .animation-box img:hover {
				transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
				-webkit-perspective: 1000px;
				perspective: 1000px;
				transition: 0.3s;
			}
		}
	
		.lists {
			.list3 .swiper-button-prev {
				left: 10px;
				right: auto;
			}
			
			.list3 .swiper-button-prev::after {
				color: rgb(64, 158, 255);
			}
			
			.list3 .swiper-button-next {
				left: auto;
				right: 10px;
        }
        
        .list3 .swiper-button-next::after {
				color: rgb(64, 158, 255);
			}
			
			.list5 .swiper-button-prev {
				left: 10px;
				right: auto;
			}
			
			.list5 .swiper-button-prev::after {
				color: rgb(64, 158, 255);
			}
			
			.list5 .swiper-button-next {
            left: auto;
            right: 10px;
			}
			
			.list5 .swiper-button-next::after {
				color: rgb(64, 158, 255);
			}
			
			.list5 {
				.swiper-slide-prev {
					position: relative;
					z-index: 3;
				}
		
				.swiper-slide-next {
					position: relative;
					z-index: 3;
				}
		
				.swiper-slide-active {
					position: relative;
					z-index: 5;
				}
			}
			
			.index-pv1 .animation-box {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
				z-index: initial;
			}
			
			.index-pv1 .animation-box:hover {
				transform: scale(1.1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
				-webkit-perspective: 1000px;
				perspective: 1000px;
				transition: 0.3s;
				z-index: 1;
			}
			
			.index-pv1 .animation-box img {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
			}
			
			.index-pv1 .animation-box img:hover {
				transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
				-webkit-perspective: 1000px;
				perspective: 1000px;
				transition: 0.3s;
			}
		}
	}
</style>
